【追記】【寄せあつめ】今さらだけどSublime Text 2の基本とカスタマイズ【&Vim化】【4日目】
2012年12月4日：Vim化について指摘と参考になる情報をいただいたので追記しました。
こんにちは、僕はVimユーザーです（ちなみにVimを完璧に使いこなしているわけではありません）。
今更ながら「Sublime Text 2」というナウでヤングなエディタも使いこなせるようになりたいと思い、Sublime Textの基本設定からプラグインやスニペットの作り方まで調べた内容をこの記事にまとめることにしました。
細かい情報までまとめることはできなかったので、より詳しい内容を紹介してくださっているブログやサイトへのリンクを設けています。
この情報以外にもSublime Text 2をVimに近づけるプラグインやカスタマイズ方法があればコメントいただけるとうれしいです。
また、間違いがあればコメントいただければすぐに直します。よろしくお願いします！
Sublime Text 2は有料（$59）のエディタです。気に入ったらお金を払いましょう。
アジェンダ
- Sublime Text 2の特徴
- Sublime Text 2をインストール
- 設定をいじってみる
- 必須、パッケージコントロールのインストール
- プラグインをインストールしてみる
- テーマをインストールしてみる
- キーバインドをカスタマイズする
- とりあえず覚えておきたいショートカット
- スニペットの作り方
- 便利なプラグイン20選
- Sublime Text 2をVimに近づける
- まとめ
それでは、Sublime Text 2の紹介から進めたいと思います。
Sublime Text 2の特徴
公式の内容そのままですがこんな特徴があります。
ここにあがってないとすればGUIとカラースキームが綺麗ですね。
- 簡単にメソッドやID、クラスに移動できる（Ctrl+p）
- 矩形選択や複数選択が可能
- 様々な機能をすぐに呼び出せるコマンドパレット（Ctrl+Shift+p）
- コーディングに集中できるフリーモード（View/Enter Distraction Free Mode menu）
- 画面の分割編集（View/Layout）
- 緩いプロジェクト機能
- 豊富なプラグインとAPI
- カスタマイズが容易（JSONとXMLでカスタマイズできる）
- クロスプラットフォーム（Win,Mac,Linux）
公式のドキュメントはこちら：Sublime Text 2 Documentation
それではさっそくSublime Text 2インストールしてみましょう。
Sublime Text 2をインストール
まずは.exeファイルをダウンロードしましょう。
特に特殊な設定はないのでさくっとインストールを済ませます。
インストールが完了したらSublime Text 2を起動してみましょう。
カスタマイズせずに素の設定でも十分に使えますが、カスタマイズすることで自分にとって使いやすいエディタにできます。
設定をいじってみる
まずは設定ファイルをいじってみましょう。
設定ファイルはJSON形式でできており、JavaScriptのオブジェクト表記法をベースにした言語です。
設定ファイルの開き方
メニューのPreferencesにあるGlobal Settings - Defaultを選択します。
設定はGUIではなく設定ファイルを直接編集します。参考に開いてみるとこうなります。
主な設定
いろいろ調べたり試しながら主要な設定項目をまとめてみました。
値は参考値なので好みの値に変更してみてください。（ごめんなさい、設定ファイルの順番にはなっていません）
{
//フォントとサイズの指定（faceは好みのフォントに）
"font_face": "Consolas",
"font_size": 10,
//行番号の表示
"line_numbers": true,
//ガーターとコードの間（スペースを節約したいかたは少なめに）
"margin": 0,
//ルーラー（カンマ区切りで複数指定可能）
"rulers": [80],
//タブサイズ
"tab_size": 8,
//カーソルの表示方法
"caret_style": "phase",
//タブをスペースに変換（タブのままが良い人はfalseに）
"translate_tabs_to_spaces": false,
//自動折り返し（横スクロールが嫌いな方はtrueに）
"word_wrap": true,
//改行時に括弧までスペースを追加
"indent_to_bracket": true,
//ミニマップを囲う線を表示（どっちでも良いけど好みが分かれるところ）
"draw_minimap_border": true,
//フォーカス中の行をハイライト（これはtrueの方が見やすいよね）
"highlight_line": true,
//行間指定（詰めすぎが嫌いな方は少し増やすと良いかも）
"line_padding_top": 0,
"line_padding_bottom": 0,
//スペースの表示（行末のスペースがあるか知りたい方）
"draw_white_space": "all",
//空白の削除（Markdown書く方はfalseが良い）
"trim_trailing_white_space_on_save": false,
//文字コード（基本そのままでも良いと思うけど、ここで変えられる）
"default_encoding": "UTF-8",
//対応する山括弧（HTMLタグなど）の強調
"match_brackets_angle": true,
//オートコンプリートの選択をタブにし、改行したい時の煩わしさを減らせます
"auto_complete_commit_on_tab": true,
//オートコンプリートが発生するまでの時間（早いレスポンスを希望する方は数値を少なめに）
"auto_complete_delay": 50,
//テーマの変更（Color SchemeはGUIで変えられるけどテーマはここで）
"theme": "Default.sublime-theme",
//スクロールスピード
"scroll_speed": 1.0,
//サイドバーのフォルダを太文字にする（好み。太字の方がわかりやすいかな）
"bold_folder_labels": true,
//スクロールバーを重ねる
"overlay_scroll_bars": "enabled"
}
より細かい設定項目に関する解説はこちらのサイト「Sublime Text 2 の設定をいじる」がおすすめです。
必須、パッケージコントロールのインストール
インストールしたらプラグインをインストールし易くするためにパッケージコントロールをインストールしましょう。
簡単です。ショートカット「Ctrl+`」（日本語キーボードの場合はControl + @）を押してコンソールを開きます。
import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'
コンソールに上の呪文を貼り付けてEnterキーを押してパッケージコントロールをインストールします。
これでパッケージコントロールのインストールは完了です。これ以降コンソールを使うこともそれほどないと思います。
他の設定に入る前に、Sublime Text 2を再起動しましょう。
プラグインをインストールしてみる
パッケージコントロールを使いVimに近づけるための「SublimeBlockCursor」をインストールしてみます。
コマンドパレットからパッケージコントロールのインストールを選択しましょう。コマンドパレットを開くショートカットは「Ctrl+Shift+p」です。
パッケージコントロールを開き、「SublimeBlockCursor」と入力します。
候補がでるので選択してインストールします。
インストールが完了したら試しにファイルを開いて正しく動作しているか確認します。
コマンドモード時にカーソルがブロック型になりました。
これがパッケージコントロールを利用したプラグインのインストール手順です。
とても簡単なのでいろいろとプラグインを探してインストールしてみてください（オススメのプラグインは後述します）。
テーマをインストールしてみる
Sublime Text 2にはかっこいいテーマがいくつかあります。
これもパッケージコントロールからさくっとインストールできるので入れてみましょう。
パッケージコントロールに「Theme」と入力
Themeと入力すると該当するテーマの候補が表示されます。色々試してみてください。
僕はPhoenixというテーマが好きなのでとりあえずそれをインストールしてみます。Phoenix以外にも「Soda theme」も人気のようです。
設定を変更する
インストールが完了したら設定ファイルにテーマの設定を追記します。
246行目にテーマの指定があるのでこれを変更します。最後のカンマを忘れずに。
{
// The theme controls the look of Sublime Text's UI (buttons, tabs, scroll bars, etc)
//"theme": "Default.sublime-theme",
"theme": "Phoenix Dark.sublime-theme",
}
変更して保存するとテーマが切り替わります。
（サイドバーの色がうまく切り替わっていないのですが再起動すれば正しく適応されます）
少し変わりました。
カラースキームの変更
Preferencesの中にColor SchemeというメニューがあるのでここからPhoenixテーマに変更してみましょう。カラースキームはテーマに依存しないので、好きなものを利用できます。
カラースキームはXMLで定義されているので、自作も容易です。
設定を追加してテーマをカスタマイズしてみる
Phoenixの設定サンプルを参考に便利そうなテーマ設定を追加してみました。
追加した設定はこれ。
詳しくはこちらに載っているので試してみてください。
//Phoenix theme setting
"phoenix_color_green": true,
"phoenix_highlight_current_tab": true,
"phoenix_sidebar_tree_large": true,
"phoenix_dirty_bottom_bar_red": true,
"phoenix_color_expanded_folder": true,
"phoenix_tabs_small": true,
"phoenix_tabs_auto_width": true,
自分好みにカスタマイズするのは楽しいですね。
キーバインドをカスタマイズする
Preferencesの中にあるKeybindings - Defaultを選択すると設定ファイルと同様にキーバインドの設定が書かれたファイルが開きます。
変更はもちろん、独自のキーバインドを設定することもできます。
記述のルールはとても簡単です。
[
//{ "keys": [ショートカットキー], "command": "コマンド名" }
{ "keys": ["ctrl+shift+n"], "command": "new_window" },
]
キーバインドに関するドキュメントはこちら。
とりあえず覚えておきたいショートカット
細かい検索などのショートカットはとりあえず置いておいて、まずはこれを。
便利なショートカットはこちらのページ「1ヶ月使って便利だと思った Sublime Text 2 のショートカット 12 選（Win、Mac両方）」か、もっと細かく知りたいかたはこちら「Sublime Text 2のキーボードショートカット一覧 (Mac OS X)」をどうぞ。
| 名前 | ショートカット | 説明 |
|---|---|---|
| コマンドの入力 | Ctrl + Shift + P | コマンドパレットを表示 |
| ファイルやIDの検索 | Ctrl + p | プロジェクト内のファイルを探します。また、#,@,:などを入力するとそれに合わせたシンボルを探します。 |
| 画面の分割（横） | Alt + Shift + (2 or 3 or 4) | 画面のグループを横に分割します。 |
| グループへのフォーカス | Ctrl + (1 or 2 or 3) | 対象のグループにフォーカスを合わせます |
スニペットの作り方
簡単なスニペットを作成してみましょう。
まずメニューバーからTools > New Snippets...を選択しスニペットの作成画面を開きます。スニペットはXMLで定義します。
<snippet>
<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<!-- <tabTrigger>hello</tabTrigger> -->
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
タブトリガーを設定する
コメントを外してtabTriggerタグの中に展開前の文字列を設定します。
<snippet>
<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>hogehoge</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
展開する内容を記述する
contentタグの中に展開されるHTMLを記述してみます。
<snippet> <content><![CDATA[ <h1></h1> <p></p> ]]></content> <!-- Optional: Set a tabTrigger to define how to trigger the snippet --> <tabTrigger>hogehoge</tabTrigger> <!-- Optional: Set a scope to limit where the snippet will trigger --> <!-- <scope>source.python</scope> --> </snippet>
さらに便利に上書きできる変数を指定する
展開時に特定の箇所のみ上書き編集することができます。
先ほどの展開後のHTMLにidとtitle,textの上書き対象を指定します。
${x:y}はxがタブを押したときに移動する順番となりyは変数名です。
同じ変数名を指定すると一度に上書きされます。
<snippet>
<content><![CDATA[
<h1 id="${1:id}">${2:title}</h1>
<p>${3:text}</p>
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>hogehoge</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
保存する
Ctrl + Sを押してファイルの拡張子を「.sublime-snippet」とし保存しましょう。
メニューバーから開いた場合、保存先の指定はいりませんが、Windowsの場合、AppData\Roaming\Sublime Text 2\Packagesの中、Macの場合~/Library/Application Support/Sublime Text 2/Packagesに保存します。
実行してみる
Ctrl + nで新しいファイルを開き、hogehogeと入力してタブキーを押してみます。
hogehoge <!--タブキー-->
すると、変数だった部分が順番に編集できるようになり、タブキーを押すと次の変数に移動します。
手軽にスニペットをつくることができますね。スニペットについて詳しく知りたい方はこちら「Sublime Text 2で自分用のスニペットを作る方法」に解説されている記事がわかりやすいです。
便利なプラグイン
パッケージコントロールを使い開発環境に合わせて便利なプラグインを探してみるのも楽しいです。
よく使われそうなプラグインを探してみました。
Git
コマンドパレットからGitコマンドを打てるようにする。
SublimeLinter
リアルタイム文法チェック。
AutoFileName
画像やCSSのパスを補完してくれる。
SCSS
Sass, SCSSのシンタックスハイライトを追加する
Emmet
zen-codingの進化版
HTML5
HTML5のスニペットや自動補完、ハイライト
WordPress
WordPressのスニペットや自動補完。
jQuery
jQueryの自動補完
Bracket Highlighter
タグなどのペアをハイライトする
Docblockr
Javascript, PHP, ActionScript, CoffeeScript, Java, Objective C, C and C++.の関数に自動コメント
Side Bar Enhancements
サイドバーの右クリックメニューを便利にする
Twitter Bootstrap Snippets
sublime-twitter-bootstrap-snippets - github
Bootstrapのスニペット
CoffeeCompile
CoffeeScriptをコンパイル
Markdown Preview
sublimetext-markdown-preview - github
markdownをブラウザでプレビューする
All Autocomplete
SublimeAllAutocomplete - github
オートコンプリートの機能強化版。マッチする文字列を補完
CSSComb
CSSのプロパティをソートしてくれる
LESS
LESSのシンタックスハイライト
SublimeCodeIntel
多くの言語に対応した自動補完やジャンプ機能を利用可能にする
IMESupport
日本語のインライン入力をサポートする
SortTabs
タブを条件に合わせてソートしてくれる
【追記】紹介してもらったプラグイン
いくつか直接メッセージをもらったプラグインを紹介します。
FileDiffs Plugin for Sublime Text 2
FileDiffs Plugin for Sublime Text 2 - github
二つのファイル間の差分を確認する
Local History
GitやSVNがなくても使える簡易バージョン管理ができる
これら以外にも沢山のプラグインがあります。
こちら「Sublime Text Packages」で探してみてください。
プラグインの作成について
こちら「How to Create a Sublime Text 2 Plugin」にチュートリアルがあります。
また、弊社のメンバーが執筆した「Sublime Text2でプラグインを作る」もわかりやすいです。
Sublime Text 2をVimに近づける
Sublime Text 2使いたいけどVimのキーバインドから離れられないという方に。
いろいろ探して試してVimに近づける方法を紹介します。もっと良い方法があればコメントもらえるとうれしいです。
Vimモードに変更する
Vimモードは設定ファイルを少しいじるだけで変更できます。324行目あたりに以下のような記述があります。
"Vintage"を削除して保存しましょう。
{
//"ignored_packages": ["Vintage"]
"ignored_packages": []
}
vim向けの設定
//起動時にコマンドモードにする "vintage_start_in_command_mode": true, //vintageキーバインドの有効化 "vintage_ctrl_keys": true,
はてブでご指摘いただき、vintageキーバインド部分を修正しました。trueにすることで有効化します。
MacOS向けの対応とVintage Modeの詳細はこちらもご確認ください。
SublimeBlockCursorを入れてカーソルをVimに近づける
上記のパッケージインストールで紹介したSublimeBlockCursorを入れることでコマンドモード時のカーソルをブロック型に変更することができます。
VintageExを入れてVimコマンドを強化する
「VintageEx」を入れることでVimのコマンド入力をある程度再現してくれます。
「Shift + :」を押すことでこのように画面下部にコマンド入力欄が表示されます。
足りないキーバインドを追加する
これだけでは足りない！という方向けにVimによくあるキーバーインドを実現する方法を紹介します。
Sublime Text 2では、連続したキーバインドの設定もできるので例えば「Ctrl + W, Ctrl + W」のような連続したキーバインドが設定できます。もちろんさらに増やすことも可能です。
[
//{ "keys": [ショートカットキー], "command": "コマンド名" }
{ "keys": ["ctrl+w", "ctrl+w"], "command": "new_window" },
]
【追記】よりVimに近いノーマルモードでのキーバインドを追加する方法
@nonaka_ryuichi 返事遅くなりました。vintageのキーバインドを自分で追加する場合は "context":[ { "key": "setting.command_mode"}] などするとVimでいうノーマルモードに対してキーバインド追加できます
— イカid:mizchi0x (@mizchi) December 4, 2012
Twitterで@mizchiさんから指摘と情報をいただきました。要点も教えていただき感謝です。
より正確なキーバインドの方法として、Vimで言うノーマルモードに対してキーバインドを追加する方法を教えていただきました。
ポイントはキーバインドのcontextを以下のように設定するのが正しいそうです。
mizchiさんが設定したキーバインドも参考に教えて頂いたので一部引用しています。詳しくはこちら。
{
//インサートモードからctrl+gで抜ける
{
"keys": ["ctrl+g"],
"command": "exit_insert_mode",
"context":[
{ "key": "setting.command_mode", "operand": false },
{ "key": "setting.is_widget", "operand": false }
]
},
//コマンドパレット呼び出し
{
"keys": [";"],
"command": "show_overlay",
"args": {"overlay": "command_palette"},
"context":[
{ "key": "setting.command_mode"}
]
}
}
また、これらの基本となるVintageのキーバインドはこちらに置かれているそうです。
Windowsの場合 :\Users\USERNAME\AppData\Roaming\Sublime Text 2\Packages\Vintage\Default.sublime-keymap、Macの場合はLibrary/Application Support/Sublime Text 2/Packages/Vintage/Default.sublime-keymapにあります。
改めて、mizchiさんありがとうございました。
これを使うことで近いキーバインドを実現できそうです。
ただ、Sublime Text 2のキーバインドと競合してしまう場合もあるので、調整もけっこう大変かもしれません。
まとめ
ざっとSublime Text 2についてまとめてみました。
記事では紹介しきれなかったマクロやブックマーク機能、自作カラースキームなどについても使いどころがわかってきたら記事にできれば良いなと思ってます。
個人的にはvimに近い状態で使っていきたいので「VintageEx」を入れるだけでかなり使いやすくなるなと思っています。カスタマイズの敷居が低いことと、見た目もおしゃれなのでカスタマイズの目処がついたらちゃんと購入（$59）してvimから移行しようと思います。
![[Vim]Leader機能を利用して短い打鍵で任意の音声ファイルを再生する](https://devio2023-media.developers.io/wp-content/uploads/2019/03/eyecatch_vim.png)
